<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="200px">
      <h2 style="text-align: center">设备停用/报废/恢复</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row gutter="15">
        <el-col :span="12">
          <el-form-item label="申请内容" prop="statusType">
            <el-radio-group @change="changeType" v-model="formData.statusType" size="medium">
              <el-radio v-for="(item, index) in statusTypeOptions" :key="index" :label="item.value.toString()"
                :disabled="item.disabled">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-select filterable v-model="formData.deviceCode" placeholder="请选择设备编号" clearable @change="changeDevice"
              :style="{ width: '100%' }">
              <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceCode"
                :value="item.deviceCode" :disabled="item.disabled">
                <span style="float: left">{{ item.deviceName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.deviceCode
                }}</span></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceName">
            <el-input disabled v-model="formData.deviceName" placeholder="请输入设备名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="出厂编号" prop="code">
            <el-input disabled v-model="formData.code" placeholder="请输入出厂编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格型号" prop="spec">
            <el-input disabled v-model="formData.spec" placeholder="请输入规格型号" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请部门" prop="deptId">
            <el-cascader disabled :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false" ref="reference"
              placeholder="请选择申请部门" :style="{ width: '100%' }" v-model="formData.deptId"
              :options="deptOptions"></el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="formData.statusType == 3">
          <el-form-item label="恢复使用前检定/校准日期" prop="checkDate">
            <el-date-picker v-model="formData.checkDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入多行文本备注" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <h4 class="form-header h4">申请理由</h4>
      <el-form-item prop="content">
        <el-radio-group v-model="content">
          <el-radio v-if="((item.value == 3 || item.value == 1 || item.value == 6) &&
              formData.statusType == 1) ||
            ((item.value == 2 || item.value == 4 || item.value == 6) &&
              formData.statusType == 3) ||
            ((item.value == 5 || item.value == 6) && formData.statusType == 2)
            " v-for="item in dict.type.sys_device_sq_content" :label="item.value" :key="item">{{ item.label
  }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- v-if="btnShow" -->
      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
import { deviceList } from "@/api/device/device.js";
import {
  deviceStatusAdd,
  updategdeviceStatus,
  deviceStatusInfo,
} from "@/api/device/deviceStatus.js";
import { getuser } from "@/api/finance/bxgl/index.js";
import store from "@/store";

export default {
  components: {},
  dicts: ["sys_device_sq_content"],
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      content: "",
      formData: {
        remark: undefined,
        contentList: [],
        remark: undefined,
        deviceCode: undefined,
        deviceId: undefined,
        spec: undefined,
        num: undefined,
        code: undefined,
        checkDate: null,
        statusType: "1",
        deptId: undefined,
        accord: undefined,
        codeRange: undefined,
      },
      deptOptions: [],
      rules: {
        deptId: [
          {
            required: true,
            message: "请选择部门设备名称",
            trigger: "blur",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],

        spec: [
          {
            required: true,
            message: "请输入规格型号",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: false,
            message: "其他说明不能为空",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur",
          },
        ],
        checkDate: [
          {
            required: false,
            message: "请选择恢复使用前检定/校准日期",
            trigger: "change",
          },
        ],
        statusType: [
          {
            required: true,
            message: "申请内容不能为空",
            trigger: "change",
          },
        ],
      },
      statusTypeOptions: [
        {
          label: "停用",
          value: 1,
        },
        {
          label: "报废",
          value: 2,
        },
        {
          label: "恢复使用",
          value: 3,
        },
      ],

      deviceOptions: [],
    };
  },
  computed: {},
  created() {
    this.$route.query.isInfo = (this.$route.query.isInfo == 'false' || this.$route.query.isInfo == false) ? false : this.$route.query.isInfo
    this.getUser();
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    } else {
      this.deviceList({ status: 1, busStatus: -1 });
    }

    this.getDeptTree();
  },
  mounted() { },
  methods: {
    getUser() {
      getuser(store.state.user.id).then((response) => {
        if (
          this.$route.query.isEdit ||
          this.$route.query.isInfo ||
          this.isInfo
        ) {
        } else {
          this.formData.deptId = response.data.user.dept.deptId;
          this.formData.deptName = response.data.user.dept.deptName;
        }
        console.log(this.formData.deptId);
      });
    },
    changeType(e, flag) {
      console.log(e);
      if (e == 3) {
        //维修
        this.deviceList({ status: 3 });
      } else if (e == 2) {
        this.deviceList({ deviceStatus: "1,3", busStatus: -1 });
      } else {
        this.deviceList({ status: 1, busStatus: -1 });
      }
      if (!flag) {
        this.formData.deviceName = undefined;
        this.formData.deviceId = undefined;
        this.formData.deviceCode = undefined;
        this.formData.code = undefined;
        this.formData.spec = undefined;
        this.content = "";
      }
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeDevice(i) {
      let row = this.deviceOptions.find((e) => e.deviceCode == i);
      if (row) {
        this.formData.deviceName = row.deviceName;
        this.formData.deviceId = row.deviceId;
        this.formData.deviceCode = row.deviceCode;
        this.formData.code = row.code;
        // this.formData.deptId = row.deptId;
        // this.formData.deptName = row.deptName;
        this.formData.spec = row.spec;
      } else {
        this.formData.deviceName = undefined;
        this.formData.deviceId = undefined;
        this.formData.deviceCode = undefined;
        this.formData.code = undefined;
        // this.formData.deptId = undefined;
        // this.formData.deptName = undefined;
        this.formData.spec = undefined;
      }
    },
    deviceList(e) {
      deviceList(e).then((response) => {
        this.deviceOptions = response.data;
      });
    },
    getinfo() {
      return deviceStatusInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
          this.content = this.formData.contentList
            .find((i) => i.isSelected == 0)
            .contentValue.toString();
          console.log(this.content);
          this.changeType(this.formData.statusType, true);
        }
      );
    },
    submitForm() {
      console.log(this.content);
      if (!this.formData.deviceCode) {
        this.$modal.msgWarning("请选择设备");
        return;
      }
      // this.$refs["elForm"].validate((valid) => {
      // if (valid) {
      let query = JSON.parse(JSON.stringify(this.formData));
      if (this.formData.contentList.length) {
        // 是编辑的
        query.contentList.forEach((i) => {
          i.isSelected = this.content == i.contentValue ? 0 : 1;
        });
      } else {
        // 新增
        let list = this.dict.type.sys_device_sq_content.map((i) => {
          return {
            isSelected: this.content == i.value ? 0 : 1,
            contentValue: i.value,
            contentLabel: i.label,
          };
        });
        console.log(list);
        query.contentList = list;
      }

      query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
      query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
      if (this.formData.deviceStatusId != undefined) {
        updategdeviceStatus(query).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.resetForm();
        });
      } else {
        deviceStatusAdd(query).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.resetForm();
        });
      }
      // }
      // });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
